import React, { useState, useEffect } from 'react';
import { Divider, Input, Button } from 'antd'
import { createConnection } from './chat';



const View: React.FC = () => {

    const [roomId, setRoomId] = useState('general');


    return (
        <>
            <Divider orientation="left">useEffect</Divider>
            
            <div>
                <label>
                    Choose the chat room:{' '}
                    <select
                        value={roomId}
                        onChange={e => setRoomId(e.target.value)}
                    >
                        <option value="general">general</option>
                        <option value="travel">travel</option>
                        <option value="music">music</option>
                    </select>
                </label>
                <hr />
                <ChatRoom roomId={roomId} />
            </div>
        </>
    )
}

export default View




const serverUrl = 'https://localhost:1234';

const ChatRoom = ({ roomId }:any) =>{
    useEffect(() => {
        const connection = createConnection(serverUrl, roomId);
        connection.connect();
        return () => connection.disconnect();
    }, [roomId]);

    return <h1>Welcome to the {roomId} room!</h1>;
}

